import React, { memo, useEffect, useState } from "react";
import { Space, Table, Modal } from "antd";
import { getTodo, delTodo, addTodo, WriteTodo, getItem } from "../api/todo";
const Todo2 = memo(() => {
  //声明表格需要的数据
  const [todo, setTodo] = useState([]);
  //input的响应式变量
  const [value, setValue] = useState("");
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");
  const [value3, setValue3] = useState("");
  const [value4, setValue4] = useState("");
  const [value5, setValue5] = useState("");
  const [value6, setValue6] = useState("");
  const [value7, setValue7] = useState("");
  //弹窗变量
  const [isModalOpen, setIsModalOpen] = useState(false);
  //存储id值
  const [id, setID] = useState("");
  const handleOk = async () => {
    await WriteTodo(id, {
      name: value4,
      sex: value5,
      age: value6,
      score: value7,
    });
    setIsModalOpen(false);
    initTodo();
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //表头的数据
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
    },
    {
      title: "成绩",
      dataIndex: "score",
      key: "score",
    },
    {
      title: "操作",
      key: "action",
      render: (_, item) => (
        <Space size="middle">
          <span
            onClick={async () => {
              await getItem(item.id).then((res) => {
                setValue4(res.data.name);
                setValue5(res.data.sex);
                setValue6(res.data.age);
                setValue7(res.data.score);
              });
              setIsModalOpen(true);
              setID(item.id);
            }}
          >
            修改
          </span>
          <span
            onClick={async () => {
              delTodo(item.id);
              initTodo();
            }}
          >
            删除
          </span>
        </Space>
      ),
    },
  ];
  //初始化数据函数
  const initTodo = async () => {
    let res = await getTodo(id);
    setTodo(res.data);
  };
  //组件挂载后执行
  useEffect(() => {
    initTodo();
  }, []);
  return (
    <div>
      <Table columns={columns} dataSource={todo} />
      <input
        type="text"
        placeholder="请输入学生姓名"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <input
        type="text"
        placeholder="请输入学生性别"
        value={value1}
        onChange={(e) => {
          setValue1(e.target.value);
        }}
      />
      <input
        type="text"
        placeholder="请输入学生年龄"
        value={value2}
        onChange={(e) => {
          setValue2(e.target.value);
        }}
      />
      <input
        type="text"
        placeholder="请输入学生成绩"
        value={value3}
        onChange={(e) => {
          setValue3(e.target.value);
        }}
      />
      <button
        onClick={async () => {
          await addTodo({
            name: value,
            sex: value1,
            age: value2,
            score: value3,
            id: Date.now(),
            key: Date.now(),
          });
          initTodo();
          setValue("");
          setValue1("");
          setValue2("");
          setValue3("");
        }}
      >
        点击添加学生信息
      </button>
      <Modal
        title="修改学生信息"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <input
          type="text"
          placeholder="请输入学生姓名"
          value={value4}
          onChange={(e) => {
            setValue4(e.target.value);
          }}
        />
        <br />
        <input
          type="text"
          placeholder="请输入学生性别"
          value={value5}
          onChange={(e) => {
            setValue5(e.target.value);
          }}
        />
        <br />
        <input
          type="text"
          placeholder="请输入学生年龄"
          value={value6}
          onChange={(e) => {
            setValue6(e.target.value);
          }}
        />
        <br />
        <input
          type="text"
          placeholder="请输入学生成绩"
          value={value7}
          onChange={(e) => {
            setValue7(e.target.value);
          }}
        />
      </Modal>
    </div>
  );
});

export default Todo2;
